<template>
  <div class="common-layout">
    <el-container>
      <HeaderNav />
      <el-main>
        <div class="main-header" v-if="!isSearchTab">
          <folderSelect />
        </div>
        <HomeMain />
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import HeaderNav from "@/components/common/HeaderNav.vue";
import folderMenu from "@/components/folder/folderMenu.vue";
import folderSelect from "@/components/folder/folderSelect.vue";
import HomeMain from "@/views/home/HomeMain.vue";
import { reactive, ref, getCurrentInstance } from "vue";
// 创建实例
const instance = getCurrentInstance()

// 接收子组件选中的tab信息
const isSearchTab = ref<boolean>(true)
instance?.proxy?.$Bus.on("onClickTab", (value: any) => {
  isSearchTab.value = value;
})



</script>

<style lang="scss" scoped>
$header-height: 0.3rem;
$logo-width: 0.6rem;
$a-font-size: 0.08rem;

section {
  margin-top: $header-height*0.5;
  height: auto;
  display: flex;
  flex-wrap: nowrap;
  background-color: #ffffff;

  .main-header {
    height: $header-height*0.8;
    width: auto;
    position: fixed;
    top: $header-height*1.1;
    left: 0.1rem;
    z-index: 9;
    display: flex;
    align-items: center;
  }

  .main {
    margin-top: $header-height;
    height: auto;
  }

}

/**
覆盖el样式
*/
// el-main标签
::v-deep(.el-main) {
  padding: 0;
}


@media screen and (max-width:1024px) {
  section {
    margin-top: $header-height;
  }
}

@media screen and (max-width:600px) {
  section {
    margin-top: $header-height*1.8;
  }
}
</style>
